<template>
  <div class="orderDetail">
    <div class="orderTable">
      <div class="orderBox">
        <div class="orderNo">
          <div class="orderInfo">
            <div>
              <span
                class="ot"
                style="font-size: 1rem; font-weight: bold"
              >包裹{{ length }}
              </span>
              <span
                class="od"
                style="font-size: 1rem"
              >{{
                order.cNextStatusName
              }}</span>
            </div>
          </div>
        </div>
        <div class="fixTitle">
          <div style="padding-right: 26.94rem">
            商品信息
          </div>
          <div style="padding-right: 6.25rem">
            单价
          </div>
          <div style="padding-right: 5.63rem">
            数量
          </div>
          <div style="padding-right: 6.81rem">
            小计
          </div>
          <div>实付</div>
        </div>
        <div
          v-for="item in SmallOrder"
          :key="item.id"
          class="order"
        >
          <div class="order_box">
            <div 
              class="goods"
              @click="GoToSho(item)"
            >
              <img
                :src="item.DefaultImage"
                alt=""
              >
              <div class="titleBox">
                <div class="tls">
                  {{ item.cProductName }}{{ item.cSpecDescription }}
                </div>
              </div>
            </div>

            <div class="type">
              <div>¥{{ item.fSalePrice }}</div>
            </div>

            <div class="orderStatus">
              <div class="status">
                {{ item.iQuantity }}
              </div>
            </div>

            <div class="amount">
              <div class="fee">
                ¥{{ (item.fSalePrice * 1000 * item.iQuantity) / 1000 }}
              </div>
            </div>
            <div class="op">
              <div class="money">
                ¥{{ (item.fSalePrice * 1000 * item.iQuantity) / 1000 }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="orderBox">
        <div class="orderNo">
          <div class="orderInfo">
            <div>
              <span class="ot">订单号</span>
              <span class="od">{{ order.cOrderNo }}</span>
            </div>
            <div>
              <span class="ot">下单时间</span>
              <span class="od">{{ order.pubuts | formatDate }}</span>
            </div>
          </div>
          <div
            v-if="order.cNextStatus == 'PAYMONEY'"
            class="cancelTips"
            @click="cancelOrder"
          >
            取消订单
          </div>
        </div>

        <div class="orders">
          <div class="orders_item">
            <div class="leftSide">
              <div>
                <div>收件人:</div>
                <div>{{ order.cReceiver }}</div>
              </div>
              <div>
                <div>联系方式:</div>
                <div>{{ order.cReceiveMobile }}</div>
              </div>
              <div>
                <div>收货地址:</div>
                <div>{{ order.cReceiveAddress }}</div>
              </div>
              <div>
                <div>发票状态:</div>
                <div style="color:#f0406f">
                  {{ getEInvoice.statusName }}
                </div>
              </div>
              <!-- <div v-if="order.cInvoiceType !== 'NONE'"> -->
              <!-- <div>发票类型:</div> -->
              <!-- <div>{{ order.cInvoiceType === 'VAT'? '增值税发票': order.cInvoiceType === 'PLAIN'? '普通纸质发票': order.cInvoiceType === 'NONE'? '不开纸质发票':'' }}</div> -->
              <!-- <div>普通电子发票</div> -->
              <!-- </div> -->
              <!-- <div v-else> -->
              <!-- <div>发票类型:</div> -->
              <!-- <div>不开发票</div> -->
              <!-- </div> -->
              <!-- <div v-if="order.cInvoiceType !== 'NONE'">
                <div>企业全称:</div>
                <div>{{ order.cEnterpriseName }}</div>
              </div>
              <div v-else />
              <div v-if="order.cInvoiceType !== 'NONE'">
                <div>纳税人识别号:</div>
                <div>{{ order.cTaxNum }}</div>
              </div>
              <div v-else /> -->
              <div v-if="order.cInvoiceType !== 'NONE'">
                <div>发票内容:</div>
                <!-- <div>{{ order.cInvoiceContent }}</div> -->
                <div>商品明细</div>
              </div>
              <div v-else />
              <!-- <div class="fapiao">
                补开发票>
              </div> -->
            </div>
            <div class="rightSide">
              <div>
                <div>商品合计:</div>
                <div>¥{{ order.fTotalMoney }}</div>
              </div>
              <div>
                <div>运费:</div>
                <div>¥{{ order.iPostage }}</div>
              </div>
              <div>
                <div>积分:</div>
                <div>¥{{ salePoints }}</div>
              </div>
              <div>
                <div>实付:</div>
                <div class="paymoeny">
                  ¥{{ order.fPayMoney }}
                </div>
              </div>
            </div>
          </div>
          <div class="orders_item">
            <el-collapse
              v-model="activeNames"
              class="collapsebox"
            >
              <el-collapse-item
                title="开票信息"
                name="1"
              >
                <el-form
                  ref="ruleFormData"
                  :model="ruleForm"
                  :rules="rules"
                  label-width="8rem"
                  label-position="left"
                  class="demo-ruleForm"
                >
                  <el-form-item label="发票类型">
                    <el-select
                      v-model="ruleForm.type"
                      placeholder="请选择发票类型"
                      style="width:100%"
                    >
                      <el-option
                        v-for="(item, invoiindex) in invoiceLiset"
                        :key="invoiindex" 
                        :label="item.name" 
                        :value="item.id" 
                      />
                    </el-select>
                    <div class="tip">
                      电子普通发票是税局认可的有效凭证，其法律效力、基本用途及 使用规定同纸质发票
                    </div>
                  </el-form-item>

                  <el-form-item 
                    label="发票抬头"
                    prop="title"
                  >
                    <el-select
                      v-model="ruleForm.title"
                      placeholder="请选择发票抬头"
                      style="width:100%"
                      @change="InvoIceChange($event)"
                    >
                      <el-option
                        v-for="(titleInv, titleInvindex) in invoIceTitle"
                        :key="titleInvindex" 
                        :label="titleInv.name" 
                        :value="titleInv.value" 
                      />
                    </el-select>
                  </el-form-item>

                  <div v-if="TitleType === '企业'">
                    <el-form-item 
                      label="企业全称"
                      prop="corpWholeName"
                    >
                      <el-input 
                        v-model="ruleForm.corpWholeName"
                        placeholder="请输入企业全称"
                      />
                    </el-form-item>
                  </div>
                  <el-form-item 
                    label="纳税人识别号"
                    prop="itin"
                  >
                    <el-input 
                      v-model="ruleForm.itin"
                      placeholder="请输入纳税人识别号"
                    />
                  </el-form-item>
                  <el-form-item 
                    label="收票人手机"
                    prop="phone"
                  >
                    <el-input 
                      v-model="ruleForm.phone"
                      placeholder="请输入收票人手机"
                    />
                  </el-form-item>

                  <el-form-item 
                    label="收票人邮箱"
                    prop="email"
                  >
                    <el-input 
                      v-model="ruleForm.email"
                      placeholder="请输入收票人邮箱"
                    />
                  </el-form-item>
                  <el-form-item style="text-align: center;">
                    <el-button
                      type="danger"
                      round
                      size="small"
                      @click="InvoiceSubmitForm('ruleFormData')"
                    >
                      申请开票
                    </el-button>
                  </el-form-item>
                </el-form>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
      </div>

      <div
        v-if="order.cNextStatus == 'TAKEDELIVERY'"
        class="confirm"
      >
        <div>
          还有
          <span class="djs">{{ djs }}</span>
          来确认收货，超时订单将自动确认收货
        </div>
        <div class="opGroup">
          <div
            class="tuihuo"
            @click="returnMoney(order)"
          >
            退款/退货
          </div>
          <div
            class="queren"
            @click="ConfirmGoods(order)"
          >
            确认收货
          </div>
        </div>
      </div>
    </div>
    <deleteModal
      ref="delModal"
      @refresh="getDetail"
    />
  </div>
</template>

<script>
import deleteModal from "../../components/common/deleteModal.vue";
export default {
  components: {
    deleteModal,
  },
  data() {
    // 手机号验证规则
    let checkPhone = (rule, value, callback) => {
      if (!value) {
          return callback(new Error('请输入手机号'));
        } else {
          const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
          if (reg.test(value)) {
            callback();
          } else {
            return callback(new Error('请输入正确的手机号'));
          }
        }
    };
    // 邮箱验证规则
    let checkEmail = (rule, value, callback) => {
      if(!value) {
        return callback(new Error('请输入收票人邮箱'))
      } else {
        const reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
        if (reg.test(value)) {
          callback()
        }  else {
          return callback(new Error('请输入正确的邮箱'))
        }
      }
    };
    return {
      newStatus: 1,
      djs: "00天00小时00分00秒",
      cOrderNo: "",
      iSKUId: "",
      order: {},
      salePoints: "",
      length: "",
      SmallOrder: [],
      activeNames: ['1'],
      iShopId: '',
      getEInvoice: {},
      invoiceLiset: [ // 发票类型
      {
        id: 1,
        name: '电子发票'
      }],
      invoIceTitle: [{
        name:'个人',
        value: '个人'
      },{
        name:'企业',
        value: '企业'
      }],
      TitleType: '个人', // 默认个人发票
      ruleForm: {
        type: 1, //发票类型
        title: '个人', // 发票抬头
        itin: '', // 纳税人识别号
        corpWholeName: '', // 企业全称
        email: '', // 邮箱
        phone: '', // 电话
      },
      rules: {
        title: [{ required: true, message: '请选择发票抬头', trigger: 'change' }],
        corpWholeName: [{ required: true, message: '请输入企业全称', trigger: 'blur' }],
        itin: [{ required: true, message: '请输入纳税人识别号', trigger: 'blur' }],
        phone: [{ required: true, validator: checkPhone, trigger: 'blur'}],
        email: [{required: true, validator: checkEmail, trigger: 'blur'}]
      }
    }
  },
  mounted() {
    console.log("asas", this.$route.query.cOrderNo);
    this.cOrderNo = this.$route.query.cOrderNo;
    this.iSKUId = this.$route.query.iSKUId;
    setInterval(() => {
      var aaa = parseInt(1929253270350);
      var bbb = new Date().getTime();
      var rightTime = aaa - bbb;
      if (rightTime > 0) {
        var dd = Math.floor(rightTime / 1000 / 60 / 60 / 24);
        var hh = Math.floor((rightTime / 1000 / 60 / 60) % 24);
        var mm = Math.floor((rightTime / 1000 / 60) % 60);
        var ss = Math.floor((rightTime / 1000) % 60);
      }
      this.djs = dd + "天" + hh + "小时" + mm + "分" + ss + "秒";
    }, 1000);
    this.getDetail();
  },
  methods: {
    // 去详情
    GoToSho(GoToSho) {
      console.log('去详情', GoToSho)
      this.$router.push({
        path: "/fruit/detail",
        query: {
          id: GoToSho.iProductId,
          iShopId: GoToSho.iShopId
        },
      });
    },
    //获取订单详情
    getDetail() {
      let params = {
        token: localStorage.getItem("token"),
        data: {
          cOrderNo: this.cOrderNo,
        },
      };
      this.$api.person.getDetail(params).then((res) => {
        if (res.code == 200) {
          console.log('this.iSKUId', this.iSKUId, res.data.oOrderDetails)
          this.order = res.data;
          this.iShopId = res.data.iShopId
          this.GetEinvoiceStat(res.data.cOrderNo,res.data.iShopId)
          this.getNewOrderData(res.data.iShopId)
          this.SmallOrder = res.data.oOrderDetails
          console.log('this.SmallOrder ',this.SmallOrder )
          this.length = res.data.oOrderDetails.length;
          let sum = 0;
          this.order.oOrderDetails.forEach((item) => {
            sum += item.salePoints;
          });
          this.salePoints = sum;
        }
      });
    },
    // 获取订单信息
    getNewOrderData(iShopId) {
      let params = {
        token: localStorage.getItem("token"),
        data: {
          iSourceDetail: 2,
          iShopId:iShopId,
        },
      }
      this.$api.good.getNewOrder(params).then((res) => {
        console.log('获取订单信息', res)
      })
    },
    // 获取电子发票
    GetEinvoiceStat(orderNo, iShopId) {
      let params = {
        token: localStorage.getItem("token"),
        orderNo: orderNo,
        iShopId: iShopId,
        data: {
          orderNo: orderNo,
          // iShopId: iShopId,
        }
      }
      this.$api.person.getEInvoice(params).then(res =>{
        console.log('获取电子发票', res)
        this.getEInvoice = res.data
      })
    },
    // 获取发票抬头的值
    InvoIceChange(InvoIceChange) {
      console.log('获取发票抬头的值', InvoIceChange)
      this.TitleType = InvoIceChange
    },
    //取消订单弹窗
    cancelOrder() {
      this.$refs.delModal.showM("cancel");
      this.$refs.delModal.getItem(this.order);
    },
    returnMoney(item){
      // 待收货
      this.$router.push({
        path: `/person/exchange?orderNo=${item.cOrderNo}`,
      });
    },
    // 确认收货
    ConfirmGoods(item) {
      console.log("确认收货", item);
      this.$refs.delModal.showM("ConfirmGoods");
      this.$refs.delModal.getItem(item);
      // this.$refs.delModal.newStatus(this.newStatus);
    },
    // 申请开票
    InvoiceSubmitForm(formName) {
      console.log('ruleFormData', formName, this.order)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = {
            token: localStorage.getItem("token"),
            data: {
              eInvoice:{
                amount: this.order.fPayMoney,// 开票金额
                contents: this.getEInvoice.contents, // 内容
                eInvoiceEnable: this.order.eInvoiceEnable,
                eInvoiceMemberBilling:  this.order.eInvoiceMemberBilling,
                eInvoiceRate: this.getEInvoice.eInvoiceRate,
                eInvoiceSMSRecept: this.getEInvoice.eInvoiceSMSRecept,
                iCorpId: this.order.iCorpId,
                iInvoiceType: this.getEInvoice.iInvoiceType,
                iShowSplite: this.getEInvoice.iShowSplite,
                iSplit: this.getEInvoice.iSplit,
                isBillingByStoreCard: this.getEInvoice.isBillingByStoreCard,
                isInvoiced: this.getEInvoice.isInvoiced,
                isShow: this.getEInvoice.isShow,
                isShowState:this.getEInvoice.isShowState,
                orderId: this.getEInvoice.orderId,
                orderNo: this.getEInvoice.orderNo,
                sourceType:this.getEInvoice.sourceType,
                state: this.getEInvoice.state,
                statusName: this.getEInvoice.statusName,
                statusButtonName: this.getEInvoice.statusButtonName,
                title: this.ruleForm.title,
                itin: this.ruleForm.itin,
                corpWholeName: this.ruleForm.corpWholeName,
                email: this.ruleForm.email,
                phone: this.ruleForm.phone,
              }
            }
          }
          this.$api.person.EinvoicesSaveEinvoice(params).then(res =>{
            if(res.code === 200) {
              this.$message.success(res.message)
            } else {
              this.$message.error(res.message)
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  }
};
</script>

<style scoped lang="scss">
.orderDetail {
  .orderTable {
    height: auto;
    // overflow-y: scroll;
  }

  .confirm {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    line-height: 5rem;
    font-size: 0.88rem;
    color: #7b7b7b;
    background: #fff;
    height: 5rem;
    padding: 0 2.19rem;

    span.djs {
      color: #f0406f;
      padding: 0 0.5rem;
    }

    .opGroup {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      width: 13rem;

      .tuihuo {
        cursor: pointer;

        &:hover {
          text-decoration: underline;
        }
      }

      .queren {
        background: #000;
        color: #fff;
        cursor: pointer;
        text-align: center;
        line-height: 2.38rem;
        width: 7.44rem;
        height: 2.38rem;

        &:hover {
          opacity: 0.8;
        }
      }
    }
  }

  .orderBox {
    // height: 15.81rem;
    background: #fff;
    margin-bottom: 0.56rem;

    .fixTitle {
      height: 3.13rem;
      background: #fff;
      line-height: 3.13rem;
      font-size: 0.88rem;
      color: #333;
      display: flex;
      flex-direction: row;
      margin: 0 2.19rem;
      border-bottom: 0.06rem solid rgba(233, 233, 233, 1);
    }

    .orderNo {
      background-color: #f6f6f6;
      height: 3rem;
      line-height: 3rem;
      display: flex;
      flex-direction: row;
      padding: 0 2.19rem;
      font-size: 0.75rem;
      justify-content: space-between;
      align-items: center;

      .cancelTips {
        color: #f0406f;
        font-size: 0.75rem;
        cursor: pointer;
      }

      .orderInfo {
        display: flex;
        flex-direction: row;

        > div {
          margin-right: 2.69rem;

          .ot {
            color: #666;
            padding-right: 0.75rem;
          }

          .od {
            color: #7b7b7b;
          }
        }
      }

      > img {
        width: 0.88rem;
        height: 0.94rem;
        vertical-align: middle;
        cursor: pointer;
      }
    }

    .orders {
      // height: 21rem;
      display: flex;
      flex-direction: column;
      margin: 0 2.19rem;
      line-height: 2.5rem;
      padding: 2.19rem 0;
      .orders_item{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        .leftSide {
          width: 30rem;

          > div {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-start;

            > div {
              font-size: 0.88rem;

              &:first-child {
                color: #999;
                width: 8rem;
              }

              &:last-child {
                color: #000;
                font-weight: bold;
                width: 20rem;
                text-align: left;
              }
            }
          }

          .fapiao {
            color: #f0406f;
            font-size: 0.88rem;
            cursor: pointer;

            &:hover {
              text-decoration: underline;
            }
          }
        }

        .rightSide {
          width: 15rem;

          > div {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-start;

            > div {
              font-size: 0.88rem;

              &.paymoeny {
                color: #f0406f !important;
              }

              &:first-child {
                color: #999;
                width: 5rem;
                text-align: right;
              }

              &:last-child {
                color: #000;
                font-weight: bold;
                width: 10rem;
                text-align: right;
              }
            }
          }
        }
        .collapsebox{
          width: 100%;
          .el-collapse-item{
            .el-collapse-item__header{
              font-size: .88rem !important;
              color: #999 !important;
            }
          }
        }
      }
    }

    .orders_item{
      .demo-ruleForm{
        .tip{
          font-size: .7rem;
          color: #999;
        }
      }
    } 

    .order {
      height: 9.68rem;
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 0 2.19rem;
      border-bottom: .06rem solid #dadada;
      .order_box{
        display: flex;
        > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        &.goods {
        width: 27rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        cursor: pointer;
        .titleBox {
          width: 22rem;
        }

        .tls {
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          color: #7b7b7b;
          font-size: 0.88rem;
          margin-bottom: 1.25rem;
          line-height: 1.2rem;
        }

        .dl {
          color: #7b7b7b;
          font-size: 0.88rem;

          &:hover {
          cursor: pointer;
          text-decoration: underline;
          }
        }

        > img {
          width: 6rem;
          height: 6rem;
          margin-right: 0.69rem;
        }
			}

			&.type {
			font-size: 0.88rem;
			color: #7b7b7b;
			width: 8rem;
			display: flex;
			flex-direction: column;
			line-height: 1.5;

			.opreate {
				color: #f0406f;
				font-size: 0.88rem;

				&:hover {
				cursor: pointer;
				text-decoration: underline;
				}
			}
			}

			&.orderStatus {
			width: 8rem;
			font-size: 0.88rem;
			line-height: 1.5;

			.status {
				color: #7b7b7b;
				line-height: 1.44rem;
			}

			.again {
				color: #f0406f;
				font-size: 0.88rem;

				&:hover {
				cursor: pointer;
				text-decoration: underline;
				}
			}

			.prize {
				background: #000;
				color: #fff;
				padding: 0.08rem 0.88rem;
				cursor: pointer;

				&:hover {
				opacity: 0.8;
				}
			}
			}

			&.amount {
			font-size: 0.88rem;
			width: 8rem;

			.fee {
				color: #7b7b7b;
			}

			.price {
				line-height: 1.44rem;
				color: #333333;
				font-weight: bold;
			}
			}

			&.op {
			color: #7b7b7b;
			width: 8rem;
			font-size: 0.88rem;
			}
		}
      }
    }
  }
}
</style>

<style>
.el-collapse-item__header {
  display: flex;
  align-items: center;
  height: 48px;
  line-height: 48px;
  background-color: #fff;
  cursor: pointer;
  border-bottom: 1px solid #ebeef5;
  font-size: .88rem;
  color: #999;
  transition: border-bottom-color .3s;
  outline: 0;
}
.el-form-item__label{
  color: #999 !important;
}
.el-button--danger:focus, .el-button--danger:hover {
  background: #f0406f;
  border-color: #f0406f;
  color: #fff;
}
.el-button--danger {
  color: #fff;
  background-color:#f0406f;
  border-color:#f0406f;
}
</style>